import React, {useState} from 'react'
import { Link,Outlet, useNavigate, useNavigationType, useResolvedPath } from 'react-router-dom'

export default function News() {
  const [list, setList] = useState([
    {id: '001', title: '消息1', content:'内容1'},
    {id: '002', title: '消息2', content:'内容2'},
    {id: '003', title: '消息3', content:'内容3'},
  ])
  console.log(useResolvedPath('/user?id=001&name=Tom#cmd'))
  const navigate  = useNavigate()
  console.log(useNavigationType())
  const myClick = (item) => {
    navigate(`detail?id=${item.id}&title=${item.title}&content=${item.content}`)
    
  }
  return (
    <>
      <div>News</div>
      <ul>
        {
          list.map(item => { 
            return (
              <li key={item.id}>
                {/* 路由param传参 */}
                {/* <Link to={`detail/${item.id}/${item.title}/${item.content}`}>{item.title}</Link> */}

                {/* 路由search传参 */}
                {/* <Link to={`detail?id=${item.id}&title=${item.title}&content=${item.content}`}>{item.title}</Link> */}

                {/* 路由state传参 */}
                <Link replace to={'detail'} state={{
                  id: item.id,
                  title: item.title,
                  content: item.content
                }}>{item.title}</Link>
                <button onClick={() => myClick(item)}>编程式导航</button>
              </li>
              
            )
          })
        }
      </ul>
      <div>
        {<Outlet/>}
      </div>
      <button onClick={() => navigate(-1)} >后退</button>
      <button onClick={() => navigate(1)} >前进</button>
        
    </>

  )
}
